<template>
  <div>
    <div style="padding-left: 30px;padding-right: 30px" >
      <el-form :inline="true" :model="userDto"  class="demo-form-inline">

        <el-row :gutter="20">
          <!--          操作人-->
          <el-col :span="8">
            <!--输入框-->
            <el-form-item label="账号：">
              <el-input v-model="userDto.account"  placeholder="账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!--        date-->
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="8">
            <!--查询按钮-->
            <el-form-item>
              <el-button type="primary" @click="page">查询</el-button>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:post:add']"
        >新增</el-button>
      </el-col>
    </el-row>




    <div>
      <!--      表格显示-->
      <el-table :data="Data" border style="width: 100%" ref="multipleTable" >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="头像"
          width="100"
        >
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar" size="small"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="account"
          label="账号 "
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
        ></el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
        >
          <template slot-scope="scope">
            <el-button type="primary" round v-if="scope.row.sex=='M'">男</el-button>
            <el-button type="danger" round v-if="scope.row.sex=='W'">女</el-button>
            <el-button type="info" round v-if="scope.row.sex=='N'">未知</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
        ></el-table-column>
        <el-table-column
          prop="orgName"
          label="组织"
        ></el-table-column>

        <el-table-column
          prop="stationName"
          label="岗位"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          sortable
          width="180"
          column-key="date"
          :filters="[{text: '启用', value:true}, {text: '警用', value:false}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status" style="color: #00afff">正常</span>
            <span v-else style="color: red">异常</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
        ></el-table-column>


        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button slot="reference" size="mini"
                       type="text"
                       @click="sear(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>

<!--      对话框-->
      <el-dialog title="查看" :visible.sync="outerVisible" class="custom-dialog">
        <el-row class="demo-avatar demo-basic">
          <el-col :span="12">
            <div class="avatar-container">
              <div class="span"></div>
              <el-avatar :size="80" :src="url"></el-avatar>
            </div>
          </el-col>
        </el-row>
        <el-row class="ss">
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
              <span>账号：</span>
              <span>{{account}}</span>
          </el-col>
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>姓名：</span>
            <span>{{name}}</span>
          </el-col>
        </el-row>
        <el-row class="ss">
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>邮箱：</span>
            <span>{{email}}</span>
          </el-col>
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>电话：</span>
            <span>{{mobile}}</span>
          </el-col>
        </el-row>
        <el-row class="ss">
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>组织：</span>
            <span>{{orgName}}</span>
          </el-col >
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>岗位：</span>
            <span>{{stationName}}</span>
          </el-col>
        </el-row>
        <el-row class="ss">
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>性别：</span>
            <span v-if="sex=='M'">男</span>
            <span v-if="sex=='W'">女</span>
            <span v-if="sex=='N'">未知</span>
          </el-col>
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>状态：</span>
            <span v-if="status" style="color: #00afff">正常</span>
            <span v-else style="color: red">异常</span>
          </el-col>
        </el-row>
        <el-row class="ss">
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>创建人：</span>
            <span>{{cname}}</span>
          </el-col>
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>修改人：</span>
            <span>{{uname}}</span>
          </el-col>
        </el-row>
        <el-row class="ss">
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>创建时间：</span>
            <span>{{create_time}}</span>
          </el-col>
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>修改时间：</span>
            <span>{{update_time}}</span>
          </el-col>
        </el-row>
        <el-row class="ss">
          <el-col :span="12">
            <i class="el-icon-user-solid"></i>
            <span>个人描述：</span>
            <span>{{work_describe}}</span>
          </el-col>
        </el-row>
      </el-dialog>

      <el-pagination
        @size-change="size"
        @current-change="curren"
        :current-page="userDto.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size=userDto.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import { pageUser,userById } from "@/api/pd-auth/user.js"
export default {
  data(){
    return{
      outerVisible:false,
      value1:[],
      userDto:{
        avatarpath:'',
        user_name:'',
        org_id:'',
        account:'',
        create_time:'',
        out_time:'',
        pageNum:1,
        pageSize:5
      },
      Data:[],
      user:{},
      account:'',
      cname:'',
      uname:'',
      url:'',
      name:'',
      email:'',
      mobile:'',
      sex:'',
      status:'',
      work_describe:'',
      create_time:'',
      update_time:'',
      orgName:'',
      stationName:'',
      total:0,
    }
  },

  //创建生命周期树
  created() {
    this.page()
  },

  methods:{
    page(){
      if (this.value1===null) {
        this.userDto.create_time = ''
        this.userDto.out_time = ''
      }else {
        if (this.value1.length > 0) {
          this.userDto.create_time = this.value1[0]
          this.userDto.out_time = this.value1[1]
        }
      }
      console.log(this.userDto)
      pageUser(this.userDto).then(res => {this.Data=res.data.list
        this.total=res.data.total
      })


    },

    //状态
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },

    //查看
    sear(val){
      this.outerVisible=true
        this.url=val.avatar
        this.user=val
        this.account=val.account
        this.sex=val.sex
        this.work_describe=val.work_describe
        this.stationName=val.stationName
        this.orgName=val.orgName
        this.update_time=val.update_time
        this.name=val.name
        this.mobile=val.mobile
        this.status=val.status
        this.email=val.email
        this.cname=val.cname
        this.uname=val.uname
        this.create_time=val.create_time


    },

    size(val) {
      this.userDto.pageSize = val
      this.page()
    },

    curren(val) {
      this.userDto.pageNum=val
      this.page()
    },

  }
}
</script>

<style scoped>
  .avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 设置容器高度 */
  }

  .span{
    flex: 15px;
  }

  .custom-dialog{
  }

  span{

    font-size: 16px; /* 设置字体大小 */
    margin: 30px;
  }

  .ss{
    margin: 10px;
  }
</style>
